﻿@using Test_LYK.Models
@using WebGrease.Css

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GetPerson</title>
</head>
<body>
<div>
    <form action="/Person/ModifyPerson" method="post">

        <table border="1">
            <thead>
            <tr>
                <td>Id</td>
                <td>Name</td>
                <td>Operation</td>
            </tr>
            </thead>
            @foreach (var p in ViewBag.PersonList as List<PersonModel>)
            {
                <tr>
                    <td id="modifyId_@p.Id">@p.Id</td>
                    <td id="modifyName_@p.Id">@p.Name</td>
                    <td id="operation_@p.Id">
                        <input id="Modify_@p.Id" type="button" value="Modify" onclick="Modify(@p.Id)"/>
                    </td>
                </tr>
            }
        </table>

    </form>
    <script>
        function Modify(id) {
            var tdName = "#modifyName_" + id;
            var tdsave = "#operation_" + id;
            var value = $(tdName).html();
            $(tdName).html("<input id='modifyNameTxt_" + id + "' value='" + value + "' />");
            $(tdsave).html("<input type='button' value='save' id='save_" + id + "'onclick='Save("+id+")'/>");
        }
        function Save(modifyId) {
            var tdId = "#modifyNameTxt_" + modifyId;
            var value = $(tdId).val();
            //var url = 

            $.ajax(
                {
                    url: "/Person/ModifyPerson/?id=" + modifyId + "&name=" + value,
                    dataType: 'text',
                    type: 'post',
                    success: function (data) {
                        if (data == "True") {
                            alert("Ok");
                            window.location.reload();
                        } else {
                            alert("No data change");
                            window.location.reload();
                        }
                    },
                    error: function(data) {
                            alert("error");
                    }
                });
        }

    </script>
</div>
</body>
</html>
